<!DOCTYPE HTML>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache" />
    <META HTTP-EQUIV="Expires" CONTENT="0" />

    <title>冰夜Home</title>

    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <!--slider-->
    <link rel="stylesheet" href="../static/css/ideal-image-slider.css" th:href="'/css/ideal-image-slider.css'"/>
    <link rel="stylesheet" href="../static/css/default.css" th:href="'/css/default.css'"/>
</head>
<body>
<div class="container" style="width: 80%">
    <p id="chart">now loading...</p>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div> <!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../static/js/jquery.min.js" th:src="'/js/jquery.min.js'"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--slider-->
<!--<script src="../../static/js/ideal-image-slider.min.js" th:src="'/js/ideal-image-slider.min.js'"></script>-->
<!--Echarts-->
<script src="../../static/js/echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: '实时监控',
            subtext: '数据随机生成'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['21:00','21:01','21:02','21:03','21:04','21:05','21:06']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '成交',
            type: 'line',
            data: [10, 12, 21, 54, 260, 830, 710]
        }]
    }

    myChart.setOption(option);

    var clock = 21;
    var minute = 7;
    var timeTask = setInterval(function () {
        option.xAxis.data.shift();
        var nowTime = timeAddOneSecondReturnStr();
        option.xAxis.data.push(nowTime);
//        option.series[0].data = arrayAllItemAdd1(option.series[0].data);
        option.series[0].data = arrayAllItemAdd1(option.series[0].data)
        myChart.setOption(option);
    },2000);

    function arrayAllItemAdd1(array) {
        array.shift();
        array.push(Math.floor((Math.random()*900)+200))
        return array;
    }

    function timeAddOneSecondReturnStr() {
        minute++;
        if(minute>59){
            minute = 0;
            clock++;
            if(clock>23){
                clock = 0;
            }
        }
        var clo;
        var min;
        if(minute<10){
            min = '0' + minute;
        }else{
            min = minute;
        }
        if(clock<10){
            clo = '0' + clock;
        }else {
            clo = clock;
        }
        return clo+ ':' + min;
    }
</script>
</body>
</html>